<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    
    .box1, .box2{width: 100px;height: 100px;background: red;position: absolute;left:0;top:0;}
    .box2{background: green;top:110px}

    /* =========== */

    .box{position: absolute;left:0;}
    .box3{width: 100px;height: 100px;background: yellow;top:220px;}
    .box4{width: 110px;height: 110px;background: pink;top:330px;}
    
  </style>
</head>
<body>
  <div class="box1"></div>
  <div class="box2"></div>

  <div class="box3 box"></div>
  <div class="box4 box"></div>
</body>
<script>


  function Drag(ele){
    this.ele = ele;
    this.addEvent();
  }
  Drag.prototype.addEvent = function(){
    const that = this;
    this.ele.onmousedown = function(eve){
      that.downE = eve || window.event;
      document.onmousemove = function(eve){
        that.moveE = eve || window.event;
        that.move()
      }
      document.onmouseup = function(){
        that.up()
      }
    }
  }
  Drag.prototype.move = function(){
    this.ele.style.left = this.moveE.pageX - this.downE.offsetX + "px";
    this.ele.style.top = this.moveE.pageY - this.downE.offsetY + "px";
  }
  Drag.prototype.up = function(){
    document.onmousemove = document.onmouseup = null;
  }


  function Drag2(ele){
    Drag.call(this, ele);
  }
  Drag2.prototype = {
    ...Drag.prototype,
    move(){
      let l = this.moveE.pageX - this.downE.offsetX;
      let t = this.moveE.pageY - this.downE.offsetY;
      if(l<0) l=0
      if(t<0) t=0
      this.ele.style.left = l + "px";
      this.ele.style.top = t + "px";
    }
  }

  const box1 = document.querySelector(".box1");
  const box2 = document.querySelector(".box2");

  // function Drag2(){}
  // Drag2.prototype = new Drag(box2);
  // Drag2.prototype.move = function(){
  //   let l = this.moveE.pageX - this.downE.offsetX;
  //   let t = this.moveE.pageY - this.downE.offsetY;
  //   if(l<0) l=0
  //   if(t<0) t=0
  //   this.ele.style.left = l + "px";
  //   this.ele.style.top = t + "px";
  // }

  new Drag(box1);

  new Drag2(box2);
  
</script>
</html>